*{
  margin: 0;
  padding: 0;
  color: #333;
  font-size: 14px;
}
.pageFoot{
  padding: 50rem 50rem;
  background: #fafafa;
  >.info{
    margin-top: 30rem;
    display: flex;
    justify-content: center;
    align-items: center;
    p{color: #999;}
    span{
      margin: 10rem;
      color: #ddd;
    }
  }
  >.other{
    display: flex;
    justify-content: space-between;
    li{
      cursor: pointer;
      width: 78rem;
      text-align: end;
      list-style: none;
      &:hover{
        list-style: disc;
      }
    }
  }
  >.fuc{
    display: flex;
    margin-bottom: 30rem;
    >div{
      flex: 1;
      display: flex;
      align-items: center;
      border: 1px solid #ddd;
      padding: 10rem;
      margin: 0 10rem;
      cursor: pointer;
      position: relative;
      i{
        display: inline-block;
        padding: 15rem;
        font-size: 36rem;
      }
      >.content{
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        p{
          font-size: 18rem;
          font-weight: bold;
        }
        input{
          border-style: none;
          border-bottom: 1px solid #dfdfdf;
          background: none;
          padding-bottom: 2rem;
          &:focus{
            outline: none;
            border-bottom-color:#999;
          }
        }
      }
      &::after{
        content: '';
        height: 2px;
        width: 0%;
        background: #333;
        position: absolute;
        bottom: -1px;
        left: 0;
        transition: 0.5s;
      }
      &:hover{
        transition: 0.5s;
        &::after{
          width: 100%;
        }
      }
    }
  }
}
.about{
  padding: 30rem 50rem;
  >.etc{
    display: flex;
    justify-content: center;
    >div{
      margin: 30rem 30rem;
      display: flex;
      align-items: center;
      cursor: pointer;
      i{
        margin-left: 1rem;
        color: transparent;
      }
      &:hover{
        i{
          color: #666;
        }
      }
    }
  }
  >.text{
    margin: 20rem 0;
    padding: 15rem;
    background-color: #fafafa;
    p{
      line-height: 20rem;
      color: #666;
    }
    i{
      display: block;
      margin: 2rem 0;
      font-size: 30rem;
      color: #ccc;
    }
    :nth-child(3){
      text-align: end;
    }
  }
  >.imgBox{
    display: flex;
    .img{
      flex: 1;
      margin: 0 5rem;
      position: relative;
      img{
        width: 100%;
      }
      >div{
        position: absolute;
        left: 10rem;
        bottom: 10rem;
        p{
          color: #fff;
          font-weight: bold;
          font-size: 16rem;
        }
      }
    }
  }
  >.desc{
    margin: 50rem 0;
    display: flex;
    justify-content: center;
    >div{
      margin: 0 50rem;
      p{
        font-size: 18rem;
      }
      span{
        font-size: 10rem;
        color: #999;
      }
      >div{
        display: flex;
        align-items: flex-end;
        margin: 15rem 0;
        h1{
          font-size: 50rem;
          line-height: 40rem;
          background: linear-gradient(40deg,#41aed3 20%,#2c59eb 50%,#fd6585 80%);
          background-clip:text;
          -webkit-text-fill-color:transparent;
          margin-right: 8rem;
        }
      }
    }
  }
  >.title{
    font-size: 30rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    span{
      font-weight: normal;
      color: #666;
      margin: 0 10rem;
    }
  }
}
.pattern{
  padding: 30rem 50rem;
  background-color: #fafafa;
  >.top{
    display: flex;
    >.left{
      display: flex;
      flex: 2;
      flex-direction: column;
      border-right: 1px solid #999;
      >.bar{
        .active{
          background-color: #EEE;
          .long{
            .s{
              border-color: #333 !important;
            }
          }
        }
        .box{
          display: flex;
          padding: 5rem 0;
          align-items: center;
          &:hover{
            background-color: #EEE;
            .long{
              .s{
                border-color: #333;
              }
            }
          }
          div{
            font-size: 12px;
          }
          .border{
            background-color: #fafafa;
            padding: 2rem 3rem;
            border: 1px solid #333;
            &:nth-child(2){
              border-left: none;
            }
          }
          .name{
            width: 80rem;
            padding-left: 5rem;
          }
          .long{
            width: 100%;
            height: 20rem;
            box-sizing: border-box;
            border-left: none;
            display: flex;
            .z{
              box-sizing: border-box;
              height: 100%;
              background-color: #333;
            }
            .s{
              flex: 1;
              border: 1rem solid #EEE;
              border-left: none;
              background-color: #EEE;
            }
          }
          .count{
            width: 22rem;
            text-align: center;
            margin-left: 15rem;
            margin-right: 70rem;
          }
        }
      }
      >.table{
        .row{
          display: flex;
          .active{
            background-color: #333;
            color: #fff;
          }
          div{
            width: 105rem;
            height: 28rem;
            border: 1px solid #333;
            text-align: center;
            line-height: 28rem;
            margin: 0 10rem 10rem 0;
            position: relative;
            cursor: default;
            &::after{
              display: block;
              content: '';
              height: 0px;
              width: 0px;
              border: 6px solid transparent;
              border-bottom-color: #fafafa;
              transform: rotate(45deg);
              position: absolute;
              top: 0;
              right: 0;
            }
            &:hover{
              background-color: #333;
              color: #fff;
            }
          }

        }
      }
      >.desc{
        display: flex;
        align-items: center;
        margin: 35rem 0;
        h1{
          font-size: 40rem;
          font-weight: bold;
        }
        >span{
          margin: 0 15rem;
        }
        >div{
          p{
            font-weight: bold;
            font-size: 18px;
          }
        }
      }
      >p{
        font-size: 30rem;
        font-weight: bold;
        display: flex;
        align-items: center;
        span{
          margin: 0 10rem;
          color: #aaa;
        }
        i{
          font-size: 30px;
          margin-right: 10rem;
        }
      }
    }
    >.right{
      flex: 1;
      display: flex;
      justify-content: space-between;
      >div:nth-child(2){
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .imgBox{
          >p{
            font-size: 12px;
            text-align: start;
          }
          .img{
            height: 206rem;
            overflow: hidden;
            border-radius: 2rem;
            img{
              height: 100%;
              transition: 0.5s;
            }
            &:hover{
              img{
                transition: 0.5s;
                transform: scale(1.1);
              }
            }
          }
        }
      }
      .text{
        padding: 0;
        display: flex;
        writing-mode: vertical-lr;
        justify-content: space-between;
        align-items: center;
        margin-left: 25rem;
        p{
          font-size: 14px;
          i{
            margin-bottom: 4rem;
          }
        }
        span{
          display: inline-block;
          font-size: 10rem;
          color: #bbb;
        }
      }
    }
  }
  >.bot{
    display: flex;
    justify-content: space-between;
    margin-top: 30rem;
    .img{
      width: 200rem;
      height: 200rem;
      overflow: hidden;
      img{
        transition: 0.5s;
        width: 100%;
      }
      &:hover{
        img{
          transition: 0.5s;
          transform: scale(1.05);
        }
      }
    }
  }
  >.foot{
    display: flex;
    align-items: center;
    margin-top: 30rem;
    >div{
      margin: 0 30rem;
      height: 1.5rem;
      width: 100%;
      background-color: #333;
    }
  }
}
.color{
  padding: 50rem;
  >.top{
    display: flex;
    >.left{
      flex: 2;
      border-right: 1rem solid #333;
      padding-right: 15rem;
      .titleBox{
        display: flex;
        align-items: center;
        position: relative;
        >span{
          line-height: 40rem;
          font-size: 20rem;
          position: absolute;
          right: 0;
          top: 0;
          font-family: "Arial Black";
        }
        p{
          font-size: 30rem;
          font-weight: bold;
          display: flex;
          align-items: center;
          span{
            font-size: 12rem;
            margin: 0 10rem;
            color: #999;
          }
        }
        div span{
          display: block;
          color: #999;
          font-size: 12rem;
          &:nth-child(2){
            font-weight: bold;
            color: #333;
            margin-top: 4rem;
          }
        }
      }
      .colorBar{
        margin-top: 30rem;
        display: flex;
        flex-direction: row-reverse;
        .item.active{
          align-items: flex-start;
          flex: 9;
          h1{
            margin-left: 30rem;
            font-size: 30rem;
            writing-mode:unset;
          }
          span{
            margin-left: 30rem;
            writing-mode:unset;
            font-size: 18rem;
          }
          p{
            margin-left: 30rem;
            font-size: 40rem;
            color: #eee;
            opacity: 1;
          }
        }
        .item{
          flex: 1;
          height: 220rem;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
          // transition: 0.3s;
          h1,span{
            color: #eee;
            margin: 15rem 0;
            writing-mode: vertical-lr;
            font-size: 12rem;
          }
          span{font-size: 10rem;}
          p{
            color: #eee;
            opacity: 0;
          }
          &:hover{
            // transition: 0.3s;
            flex: 9;
            ~.active{
              flex: 1;
              align-items: center;
              h1,span,p{
                margin-left: 0;
                writing-mode: vertical-lr;
                color: #eee;
                margin: 15rem 0;
                font-size: 12rem;
              }
              p{opacity: 0;}
            }
            align-items: flex-start;
            flex: 9;
            h1{
              writing-mode:unset;
              margin-left: 30rem;
              font-size: 30rem;
            }
            span{
              writing-mode:unset;
              margin-left: 30rem;
              font-size: 18rem;
            }
            p{
              margin-left: 30rem;
              font-size: 40rem;
              color: #eee;
              opacity: 1;
            }
          }
        }
      }
    }
    >.right{
      flex: 1;
      // padding-left: 15rem;
      display: flex;
      .imgRight{
        >p{
          font-size: 14px;
          margin-top: 30rem;
        }
        .img{
          height: 206rem;
          overflow: hidden;
          border-radius: 2rem;
          img{
            width: 100%;
            transition: 0.5s;
          }
          &:hover{
            img{
              transition: 0.5s;
              transform: scale(1.1);
            }
          }
        }
      }
      .text{
        padding: 0;
        display: flex;
        writing-mode: vertical-lr;
        justify-content: space-between;
        align-items: center;
        p{
          font-size: 14px;
        }
        span{
          display: inline-block;
          font-size: 10rem;
          color: #bbb;
          margin: 0 25rem;
          padding-bottom: 24rem;
        }
      }
    }
  }
  >.bot{
    width: 100%;
    margin: 20rem 0 0 0;
    display: flex;
    justify-content: space-between;
    >.show{
      display: flex;
      .img{
        width: 177rem;
        height: 287rem;
        margin-right: 20rem;
        overflow: hidden;
        img{
          position: relative;
          left: -22rem;
          height: 100%;
          transition: 0.3s;
          &:hover{
            transition: 0.3s;
            transform: scale(1.05);
          }
        }
      }
    }
    >.more{
      cursor: pointer;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      p{
        writing-mode: vertical-lr;
        font-weight: bold;
        i{
          display: inline-block;
          transform: rotate(180deg);
        }
        span{
          color: #aaa;
          font-size: 14px;
          font-weight: normal;
        }
      }
      >div{
        height: 60rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        i{
          color: #999;
          font-size: 14px;
        }
      }
    }
  }
}
.week{
  background: #fafafa;
  padding: 50rem 50rem 30rem 50rem;
  display: flex;
  justify-content: space-between;
  &>.left{
    .title{
      p{
        font-size: 36rem;
        font-weight: bold;
        margin-bottom: 10rem;
      }
      span{
        display: block;
      }
    }
    .box{
      cursor: default;
      margin: 50rem 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      &>div{
        width: 129rem;
        padding: 10rem 0;
        position: relative;
        p{
          font-size: 16px;
        }
        span{
          font-size: 10rem;
          color: #666;
        }
        &::after{
          content: '';
          display: block;
          transition: 0.3s;
          position: absolute;
          bottom: 0;
          left: 0;
          height: 2rem;
          width: 0rem;
          background-color: #333;
        }
      }
      i{
        opacity: 0;
      }
      &:hover{
        >div::after{
          width: 129rem;
        }
        p{
          font-weight: bold;
        }
        i{
          opacity: 1;
        }
      }
    }
    &>:nth-child(2){
      div{
        &::after{
          width: 100%;
          background-color: #333;
        }
        p{
          font-weight: bold;
        }
      }
      i{
        opacity: 1;
      }
    }
  }
  &>.right{
    width: 1000rem;
    .content{
      display: flex;
      .box{
        width: 174rem;
        height: 301.5rem;
        margin-right: 28rem;
        position: relative;
        background-color: #333;
        >p{
          background-color: #fafafa;
          width: 100%;
          position: absolute;
          bottom: 0;
          font-size: 12rem;
          line-height: 50rem;
          text-align: center;
          color: #bbb;
        }
        .top{
          border: 1rem solid #bbb;
          display: flex;
          position: absolute;
          left: 0;
          top: 0;
          transition: 0.3s;
          p{
            background-color: #fafafa;
            padding-top: 10rem;
            font-size: 10rem;
            writing-mode: vertical-lr;
            line-height: 24rem;
            color: #bbb;
          }
          .img{
            width: 150rem;
            height: 250rem;
            overflow: hidden;
            img{
              position: relative;
              left: -15rem;
              transition: 0.6s;
              height: 100%;
            }
          }
        }
        &:hover{
          .top{
            transition: 0.3s;
            left: -10rem;
            top: -10rem;
            border: 1rem solid #333;
            img{
              transition: 0.6s;
              transform: scale(1.05);
            }
          }
          p{
            color: #333;
          }
        }
      }
      .conBox{
        .box{
          margin-right: 0;
        }
      }
      .contentTitle{
        display: inline-block;
        font-size: 18rem;
        font-weight: bold;
        margin-bottom: 20rem;
      }
    }
    .title{
      font-size: 12rem;
      width: 700rem;
      display: flex;
      justify-content: space-between;
      margin-bottom: 30rem;
    }
  }
}
.trend{
  padding: 30rem 50rem;
  .content{
    margin-top: 30rem;
    display: flex;
    justify-content: space-between;
    &>.left{
      width: 600rem;
      &>.top{
        border-left: 4rem solid;
        border-image: linear-gradient(0deg,#fd6585,#0d25d9) 1;
        display: flex;
        align-items: flex-end;
        .right{
          font-size: 14px;
          & :nth-child(2){
            line-height: 34rem;
            border-bottom: 2rem solid #bbb;
            position: relative;
            cursor: pointer;
            &::after{
              display: inline-block;
              height: 2.5rem;
              position: absolute;
              left: 0;
              bottom: -2rem;
              content: '';
              width: 0;
              background-color: #333;
              transition: width 0.5s;
            }
            &:hover::after{
              width: 100%;
            }
          }
          & :nth-child(1){
            font-size: 16px;
            font-weight: bold;
          }
        }
        .left{
          margin: 0 40rem;
          h1{
            font-weight: normal;
            font-size: 60rem;
            margin-bottom: 2rem;
          }
        }
      }
      &>.center{
        font-size: 12rem;
        color: #bbb;
        padding: 50rem 0;
        margin-bottom: 50rem;
        border-bottom: 1rem solid #bbb;
      }
      &>.bot{
        color: #888;
        .table{
          margin-top: 20rem;
          display: flex;
          .tableBox{
            box-sizing: border-box;
            width: 100rem;
            padding: 10rem;
            margin-right: 10rem;
            border: 1rem solid #ccc;
            background: url('https://staticf3.pop-fashion.com/static/images/home/v2/png_nor_bg.png') no-repeat 50%/100%;
            &>span{
              margin-top: 56rem;
            }
            & div p{
              margin-bottom: 2rem;
            }
            &.first{
              color: #333;
              border-color: #333;
              background: url('https://staticf3.pop-fashion.com/static/images/home/v2/png_sel_bg.png') no-repeat 50%/100%;
            }
            &:hover{
              color: #333;
              border-color: #333;
              background: url('https://staticf3.pop-fashion.com/static/images/home/v2/png_sel_bg.png') no-repeat 50%/100%;
            }
          }
          p{
            font-weight: bold;
          }
          span{
            display: block;
            font-size: 12rem;
          }
        }
        .title{
          color: #666;
          font-size: 14rem;
        }
      }
    }
    &>.right{
      border-bottom: 1rem solid #333;
      width: 550rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .desc{
        width: 100%;
        padding-bottom: 35rem;
        .second{
          font-size: 14rem;
          i{
            display: inline-block;
            margin-left: 4rem;
          }
        }
        .first{
          display: flex;
          justify-content: space-between;
          &>div{
            display: flex;
            align-items: center;
            p{
              font-size: 24rem;
              margin-bottom: 4rem;
            }
            span{
              margin: 0 10rem;
            }
          }
          & div:nth-child(2){
            i{
              font-size: 26rem;
            }
          }
        }
      }
      .img{
        width: 500rem;
        height: 312rem;
        box-shadow: 50rem 50rem 0 0 #aaaaaa90;
        overflow: hidden;
        img{
          width: 100%;
          transition: 0.5s;
          &:hover{
            transform: scale(1.1);
            transition: 0.5s;
          }
        }
      }
      
    }
  }
  .trendTimeLine{
    color: #bbb;
    font-size: 14rem;
    display: flex;
    justify-content: end;
    div{
      height: 40rem;
      border-bottom: 2rem solid #bbb;
      p{
        display: inline-block;
        line-height: 40rem;
        &:nth-of-type(1){
          color: #333;
          border-bottom: 2rem solid #333;
        }
        &:hover{
          color: #333;
          cursor: pointer;
        }
      }
      span{
        margin: 0 30rem;
      }
    }
  }
  .trendTitle{
    width: 330rem;
    p{
      font-size: 12rem;
      margin: 10rem 0;
    }
    h1{
      font-size: 30rem;
      display: flex;
      align-items: center;
      span{
        font-size: 16rem;
        font-weight: normal;
        margin: 0 10rem;
      }
    }
  }
}
.blackBg{
  background: linear-gradient(120deg,#000,#434343,#000);
  padding: 0 50rem;
  padding-bottom: 30rem;
  .table{
    width: 100%;
    height: 270rem;
    background: #fff;
    display: flex;
    margin-top: 30rem;
    font-size: 14rem;
    .right{
      padding: 15rem;
      width: 100%;
      box-sizing: border-box;
      .content{
        margin-top: 10rem;
        display: flex;
        justify-content: space-around;
        .contentBox{
          div{
            overflow: hidden;
            img{
              height: 150rem;
              transition: 0.3s;
              &:hover{
                transform: scale(1.1);
                transition: 0.3s;
              }
            }
          }
          
          p{
            display: flex;
            align-items: center;
            justify-content: space-between;
            i{
              font-size: 30rem;
              background: linear-gradient(150deg,#fab2ff 40%,#72edf2 90%);
              background-clip:text;
              -webkit-text-fill-color:transparent;
            }
          }
          span{
            font-size: 12rem;
            color: #aaa;
          }
        }
      }
      .title{
        display: flex;
        justify-content: space-between;
        .rightTitle{
          display: flex;
          align-items: center;
          i{
            font-size: 20rem;
            &:nth-of-type(1){
              color: #ccc;
            }
            &:nth-of-type(2){
              margin: 0 10rem;
            }
          }
          span{
            text-decoration: underline;
          }
        }
        .leftTitle{
          display: flex;
          line-height: 28rem;
          p{
            margin-left: 10rem;
            padding: 0 12rem;
            border: 1rem solid #333;
            line-height: 26rem;
            background: linear-gradient(90deg,#90f7ec30,#32ccbc30);
            i{
              font-size: 14rem;
              margin-right: 4rem;
            }
          }
        }
      }
    }
    .left{
      width: 150rem;
      border-right: 1rem solid #333;
      display: flex;
      flex-direction: column;
      p{
        width: 100%;
        flex: 1;
        border-bottom: 1rem solid #333;
        text-align: center;
        line-height: 45rem;
        &:first-child{
          background:#333;
          color: #fff;
        }
        &:nth-last-child(1){
          border: none;
        }
        &:hover{
          background:#333;
          color: #fff;
          cursor: pointer;
        }
      }
    }
  }
  .bigImg{
    display: flex;
    margin-top: 30rem;
    border-left: 1rem solid #fff;
    justify-content: space-between;
    .left{
      margin-left: 30rem;
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      & h1:nth-of-type(1){
        background: linear-gradient(30deg,#fab2ff,#72edf2);
        background-clip:text;
        -webkit-text-fill-color:transparent;
      }
      &>div p{
        padding-bottom: 10rem;
        font-size: 12rem;
        color: #ffffff80;
      }
      &>div h1{
        color: #fff;
        margin: 10rem 0;
        font-size: 42rem;
      }
      img{
        align-self:flex-start;
        height: 50rem;
        border-radius: 4rem;
      }
    }
    .right{
      img{
        height: 340rem;
        border-radius: 2rem;
      }
    }
  }
  .title{
    .tab{
      margin: 10rem 0;
      display: flex;
      justify-content: space-between;
      p{
        color: #fff;
        line-height: 40rem;
        font-size: 14rem;
        &:nth-child(1){
          border-bottom: 1rem solid #fff;
          box-sizing: border-box;
        }
        &:hover{
          border-bottom: 1rem solid #fff;
          box-sizing: border-box;
          cursor: pointer;
        }
      }
    }
    .top{
      height: 64rem;
      display: flex;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .name{
        color: #fff;
        font-weight: bold;
        font-size: 30rem;
        line-height: 60rem;
        i{
          color: #fff;
          font-size: 32rem;
          margin-right: 2rem;
        }
      }
      .desc{
        p{
          color: #fff;
          // font-weight: bold;
          font-size: 12rem;
          // margin-bottom: -6rem;
        }
        span{
          font-size: 12rem;
          color: #999;
        }
      }
      .searchMethod{
        display: flex;
        .img{
          width: 40rem;
          display: flex;
          background: #555;
          border-radius: 8rem;
          background-color: #555;
          align-items: center;
          justify-content: center;
          margin: 0 5rem;
          i{
            color: #fff;
            font-size: 22rem;
            background: linear-gradient(30deg,#eead92,#c2ffd8,#6018dc);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            color: #fff;
            font-weight: bold;
          }
        }
        .img .icon-skin{
          background: linear-gradient(30deg,#f5db80,#ee9ae5,#5312d6);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        .search{
          color: #fff;
          height: 40rem;
          padding: 0 15rem;
          line-height: 40rem;
          background-color: #555;
          border-radius: 8rem;
          display: flex;
          input{
            border-radius: 8rem;
            line-height: 32rem;
            font-size: 14rem;
            background: none;
            color: white;
            border: none;
            margin-left: 10rem;
            &:focus{
              outline: none;
            }
            &::-webkit-input-placeholder{
              color: #999;
            }
          }
          i{
            color: #fff;
            margin-right: 5rem;
          }
          p{
            font-size: 16rem;
            color: #fff;
          }
        }
      }
      .download{
        font-size: 12rem;
        color: #fff;
        i{
          margin-right: 4rem;
          font-size: 16rem;
          background: linear-gradient(60deg,#f0ff00,#c2ffd8,#465efb);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
      .login{
        color: #fff;
        font-size: 14rem;
      }
    }
  }
}